<template>
  <div id="app" @click="udateLoginShow(false)" class="mask">
    <Header></Header>
    <transition name="login"><Login v-show="logonShow"></Login></transition>
    <router-view />
    <Footer></Footer>
    <el-backtop
      style="border-radius: 0; width: 49px; height: 43px"
      :bottom="300"
      :visibility-height="50"
    >
      <div></div>
    </el-backtop>
    <Audio :key="$store.state.audioKey"></Audio>
  </div>
</template>

<script>
import Login from "./components/Login.vue";
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import Audio from "@/components/Audio.vue";
import { mapState, mapMutations } from "vuex";

export default {
  components: {
    Header,
    Footer,
    Login,
    Audio,
  },
  computed: {
    ...mapState({
      logonShow: (state) => state.login.logonShow,
    }),
  },

  methods: {
    ...mapMutations({
      udateLoginShow: "login/udateLoginShow",
    }),
  },
};
</script>

<style lang="less">
.mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.el-backtop {
  display: block;
  left: 50%;
  margin-left: 500px;
  bottom: 160px;
  width: 49px;
  height: 44px;
  background: url("./assets/images/sprite.png") no-repeat;
  background-position: -265px -47px;
}
.login-enter,
.login-leave-to {
  opacity: 0;
}
.login-enter-active,
.login-leave-active {
  transition: 0.5s;
}
.login-enter-to,
.login-leave {
  opacity: 1;
}
</style>
